<template>
<div class="person">
<h1 > 情况二:监视ref定义的对象类型的数据</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改人</button>
</div>
</template>
<script setup lang="ts" name="person">
import {ref,computed,watch} from 'vue'
let person = ref({
  name:"张三",
  age :18,
})

// 方法
const changeName=()=>{
  person.value.name += "~"
}
const changeAge=()=>{
  person.value.age += 1
}

const changePerson =()=>{
  person.value = {name:'李四',age:90}
}

//  监视 情况一:监视ref定义的基本类型数据, 监视的是地址值, 若想监视对象内部值的变化,需要手动深度监视
// watch的第一个属性:被监视的数据
// watch的第二个属性:监视的回调
// watch的第三个属性:配置对象(例如：deep深度监视`immediate等等)
watch(person,(newValue,oldValue)=>{
console.log("person的变化",newValue,oldValue);

},{deep:true, })
</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
